require("bootstrap/dist/css/bootstrap.css")
require("bootstrap")



const jQuery = require("jquery");
const $ = jQuery;



$(function() {
	$(".search button").on("click", function() {
		const mz = $(this).prev().val();
		if (!mz) {
			return false;
		}
		// console.log(mz)
		// http://localhost:3000/search?keywords=%E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA
		$.ajax({
			url: `http://localhost:3000/search?keywords=${mz}`,
			success(res) {
				const list = res.result.songs
				list.forEach(function(item) {
					$(`<li class="list-group-item list-group-item-primary"> <span>${item.name}</span> <button data-id="${item.id}">播放</button> </li>`).appendTo("ol")
				})
			}
		})
		
		
		$("ol").on("click", "button", function() {
			const ID = $(this).data("id")
			const url = `https://music.163.com/song/media/outer/url?id=${ID}.mp3`
			$("#mp3").attr("src", url)
			$("#mp3")[0].play()
			$(this).text("播放中").parent().siblings().find("button").text("播放")
			$(this).parent().addClass("list-group-item-danger").removeClass("list-group-item-primary").siblings().removeClass("list-group-item-danger").addClass("list-group-item-primary")
		})
		
		
	})


	
	
	
})
